<script setup lang="ts">
import { watch } from 'vue';
import { ODivider, ODropdown, ODropdownItem, OIcon, OBadge } from '@opensig/opendesign';
import { login, logout, useStoreData, getUserAuth } from '@/utils/login';
import IconChevronDown from '~icons/app/icon-chevron-down.svg';
import IconOverview from '~icons/app/icon-overview.svg';
import IconSetting from '~icons/app/icon-setting.svg';
import IconLogOff from '~icons/app/icon-log-off.svg';
import IconMessage from '~icons/app/icon-message.svg';
import IconAvatar from '~icons/app/icon-avatar-line.svg';

import { getUserInfo } from '@/api/api-setting';
import { syncInfo } from '@/api/api-notification.ts';

import { useUserInfoStore } from '@/stores/user';
import { useNoticeData } from '@/stores/notice';
import AppAvatar from '@/components/header/AppAvatar.vue';
import { useMeetingStore } from '@/stores/meeting.ts';
import { useScreen } from '@/composables/useScreen.ts';
import { storeToRefs } from 'pinia';

const userInfoStore = useUserInfoStore();
const meetingStore = useMeetingStore();

const token = getUserAuth();
const userStore = useStoreData();
const noticeData = useNoticeData();

// -------------------- 同步个人信息到消息中心 --------------------
const syncInfoData = (val: any) => {
  const gitcodeData = val.identities.find((e) => e.identity?.includes('gitcode'));
  const params = {
    country_code: '',
    gitee_user_name: gitcodeData?.user_name ? gitcodeData?.user_name : '',
    mail: val.email,
    phone: val.phone,
    user_name: val.username,
  };
  syncInfo(params).then(() => {});
};

// 获取用户信息
const getData = () => {
  getUserInfo('openubmc').then((res) => {
    syncInfoData(res.data);
    userInfoStore.$patch({
      ...res.data,
    });
  });
};

watch(
  () => token,
  (val) => {
    if (val) {
      getData();
      noticeData.updateNoticeTotal();
    }
  },
  { immediate: true }
);

// -------------------- 跳转页面 --------------------
const jumpToPage = (href: string) => {
  location.href = href;
};
const { lePadV, isPhone } = useScreen();

const { hasPerm } = storeToRefs(meetingStore);
const toPersonal = () => {
  if (isPhone.value) {
    jumpToPage('/my/personal');
  } else if (hasPerm.value) {
    jumpToPage('/my/meeting');
  } else {
    jumpToPage('/my/collections');
  }
};
</script>

<template>
  <div class="header-user">
    <!-- 未登录或登录失败 -->
    <template v-if="!token">
      <OIcon @click="login" class="avatar-icon">
        <IconAvatar></IconAvatar>
      </OIcon>
    </template>

    <!-- 已登录 -->
    <Transition name="header-user-zoom-in">
      <div class="user-info" v-if="token">
        <ODropdown trigger="hover" optionPosition="bottom" option-wrap-class="user-dropdown">
          <div class="info-wrap hover-icon-rotate">
            <OBadge :value="noticeData.noticeTotal" color="danger" class="user-avatar" :class="{ 'notice-not': !noticeData.noticeTotal }">
              <AppAvatar :avatar="userInfoStore.photo" :name="userInfoStore.username" :custom-size="lePadV ? 24 : 32" />
            </OBadge>
            <p class="user-account">{{ userStore.username }}</p>
            <OIcon class="icon"><IconChevronDown /></OIcon>
          </div>

          <template #dropdown>
            <!-- 账号信息 -->
            <div class="user-info-dropdown">
              <AppAvatar :avatar="userInfoStore.photo" :name="userInfoStore.username" :custom-size="lePadV ? 24 : 32" />
              <div class="right-info">
                <p class="user-fullname">用户名</p>
                <p class="user-account">{{ userStore.username }}</p>
              </div>
            </div>
            <ODivider :style="{ '--o-divider-gap': '6px' }" />
            <!-- 个人中心 -->
            <ODropdownItem id="e2e_headerUser_center" @click="toPersonal">
              <OIcon><IconOverview /></OIcon>
              个人中心
            </ODropdownItem>
            <!-- 消息中心 -->
            <ODropdownItem id="e2e_headerUser_message" @click="jumpToPage('/notifications')">
              <OBadge :value="noticeData.noticeTotal" color="danger" class="message" :class="{ 'notice-not': !noticeData.noticeTotal }">
                <OIcon><IconMessage /></OIcon>
              </OBadge>
              消息中心
            </ODropdownItem>
            <ODivider :style="{ '--o-divider-gap': '6px' }" />
            <!-- 帐号设置&退出登录 -->
            <ODropdownItem id="e2e_headerUser_accountSetting" @click="jumpToPage('/my/profile')">
              <OIcon><IconSetting /></OIcon>账号设置
            </ODropdownItem>
            <ODropdownItem>
              <OIcon><IconLogOff /></OIcon>
              <div @click="logout">退出登录</div>
            </ODropdownItem>
          </template>
        </ODropdown>
      </div>
    </Transition>
  </div>
</template>

<style lang="scss" scoped>
.header-user {
  display: flex;
  align-items: center;
  height: 100%;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.15s;
}

.o-btn-text {
  --btn-min-width: 0;
  background-color: transparent !important;
  padding-left: 0;
  padding-right: 0;
  transition: color var(--o-duration-s) var(--o-easing-standard);
}
.o-btn + .o-btn {
  margin-left: 16px;
}
.user-info {
  height: 100%;
  min-width: 32px;
  display: flex;
  cursor: pointer;
}
.info-wrap {
  height: calc(100% - 10px);
  margin: 5px 0;
  display: flex;
  align-items: center;
  .icon {
    margin-left: 4px;
  }
  @include hover {
    .avatar-img {
      transform: rotate(0);
    }
  }
}
.avatar-icon {
  font-size: 24px;
  color: var(--o-color-info1);
  cursor: pointer;
  @include hover {
    color: var(--o-color-primary1);
  }
}
.user-avatar {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  :deep(.o-badge-content) {
    right: 6px;
  }
}
.avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.o-dropdown-item {
  @include tip1;
  width: 142px;
  white-space: nowrap;
  --dropdown-item-color: var(--o-color-info1);
  --dropdown-item-justify: flex-start;
  --dropdown-item-padding: 6px 8px;
  .o-icon {
    color: var(--o-color-info3);
    --icon-size: 24px;
    margin-right: 8px;
  }
  .message {
    height: 24px;
    display: flex;
    @include respond-to('laptop') {
      height: 16px;
    }
    :deep(.o-badge-content) {
      right: 14px;
    }
  }
}

.notice-not {
  :deep(.o-badge-content) {
    display: none;
  }
}

.user-info-dropdown {
  display: flex;
  align-items: center;
}
.right-info {
  margin-left: 10px;
}
.user-fullname {
  @include tip2;
  color: var(--o-color-info3);
}
.user-account {
  @include tip1;
  color: var(--o-color-info1);
  max-width: 90px;
  font-weight: 500;
  @include text-truncate(1);
}
@include respond-to('<=pad_v') {
  .header-user {
    min-width: auto;

    .o-btn + .o-btn {
      margin-left: 8px;
    }

    .user-info {
      min-width: 24px;
      .info-wrap {
        .user-avatar {
          margin-right: 0;
          width: 24px;
          height: 24px;
        }
        .avatar-img {
          width: 24px;
          height: 24px;
        }

        .user-account {
          display: none;
        }

        .icon {
          display: none;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.user-dropdown {
  --dropdown-list-padding: 11px 11px 6px !important;
  --dropdown-list-radius: var(--o-radius-m);
}

@include respond-to('<=pad_v') {
  .o-badge-content {
    right: 0 !important;
    transform: translate(0, 0) scale(0.5);
    transform-origin: top right;
    min-width: 18px;
    width: 18px;
    height: 18px;
    font-size: 12px;
    line-height: 18px;
    .o-badge-label {
      transform: scale(1);
      font-size: 12px;
      line-height: 18px;
    }
  }

  .user-dropdown {
    --dropdown-list-padding: 9px 4px !important;
    --dropdown-list-radius: 8px;

    .user-info-dropdown {
      display: none;
    }

    .o-divider {
      display: none;
    }

    .o-icon {
      display: none;
    }

    .message {
      .o-badge-content {
        right: -60px !important;
      }
    }

    .o-dropdown-item {
      width: 80px;
      padding: 4px 12px;
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 14px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
